/**
 * @file investmentAnalysis/Home.js
 *  交易行为分析
 * @author
 */

import React, { PropTypes, PureComponent } from 'react';
import { connect } from 'react-redux';
import { autobind } from 'core-decorators';
import { withRouter, routerRedux } from 'dva/router';
import { Tabs } from 'antd';
import _ from 'lodash';
import moment from 'moment';

import Tabtitle from '../../../components/common/TabTitle';
import FeatureList from '../../../components/investmentAnalysis/FeatureList';
import ClosedPositionList from '../../../components/investmentAnalysis/ClosedPositionList/ClosedPositionList';
import FeaturesReport from '../../../components/investmentAnalysis/FeaturesReport';
import AccountAssets from '../../../components/investmentAnalysis/AccountAssets';
import AnalysisReport from '../../../components/investmentAnalysis/AnalysisReport';
import Drawer from '../../../components/investmentAnalysis/Drawer';
import { dateConvert } from '../../../utils/helper';
import constants from '../../../config/constants';

import styles from './home.less';

const TabPane = Tabs.TabPane;

const params = {
	pagesize: constants.pagesize || 15,
};


const mapStateToProps = state => ({
	list: state.featureList.list,
	page: state.featureList.page,
	currentDataDate: state.featureList.currentDataDate,
	featuresMapping: state.featureList.featuresMapping,
	selectedTrader: state.featureList.selectedTrader,
	selectedClosedPositions: state.closedPositions.selected,
	isDetailOpen: state.featureList.isDetailOpen,
	isClosedPositionsDetailOpen: state.closedPositions.isDetailOpen,
});

const mapDispatchToProps = {
	getFeatureList: query => ({
		type: 'featureList/getFeatureList',
		payload: query || {},
	}),
	getFeaturesMapping: query => ({
		type: 'featureList/getFeaturesMapping',
		payload: query || {},
	}),
	changeTrader: selectedRow => ({
		type: 'featureList/changeTrader',
		payload: { selectedTrader: selectedRow },
	}),
	changeDetailOpen: open => ({
		type: 'featureList/changeDetailOpen',
		payload: { open },
	}),
	changeClosedPositionsDetailOpen: open => ({
		type: 'closedPositions/changeDetailOpen',
		payload: { open },
	}),
	push: routerRedux.push,
	replace: routerRedux.replace,
};

@connect(mapStateToProps, mapDispatchToProps)
@withRouter
export default class InvestmentAnalysisPort extends PureComponent {
	static propTypes = {
		getFeatureList: PropTypes.func.isRequired,
		getFeaturesMapping: PropTypes.func.isRequired,
		changeTrader: PropTypes.func.isRequired,
		changeDetailOpen: PropTypes.func.isRequired,
		changeClosedPositionsDetailOpen: PropTypes.func.isRequired,
		list: PropTypes.array.isRequired,
		page: PropTypes.object.isRequired,
		location: PropTypes.object.isRequired,
		push: PropTypes.func.isRequired,
		replace: PropTypes.func.isRequired,
	}

	static defaultProps = {
	}

	componentWillMount() {
		const {
			getFeatureList,
			getFeaturesMapping,
			location: { query: { currentpage, sortField, sortOrder, pagesize, trader } },
		} = this.props;
		const condition = {
			...params,
			currentpage: currentpage || 1,
			sortField: sortField || 'fdtScore',
			sortOrder: sortOrder || 'descend'
		};
		if (trader) {
			condition.trader = trader;
		}
		if (pagesize) {
			condition.pagesize = pagesize;
		}
		if (sortField || sortOrder) {
			condition.sortField = sortField;
			condition.sortOrder = sortOrder;
		}
		getFeaturesMapping();
		getFeatureList(condition);
	}

	componentWillReceiveProps(nextProps) {
		const {
			getFeatureList,
			location: { query: { currentpage, sortField, sortOrder, pagesize, trader } },
		} = nextProps;
		const { location: { query: preQuery } } = this.props;

		if (!_.isEqual(currentpage, preQuery.currentpage)
			|| !_.isEqual(sortField, preQuery.sortField)
			|| !_.isEqual(sortOrder, preQuery.sortOrder)
			|| !_.isEqual(pagesize, preQuery.pagesize)
			|| !_.isEqual(trader, preQuery.trader)) {
			const condition = {
				...params,
				currentpage: currentpage || 1,
			};
			if (pagesize) {
				condition.pagesize = pagesize;
			}
			if (sortField || sortOrder) {
				condition.sortField = sortField;
				condition.sortOrder = sortOrder;
			}
			if (trader) {
				condition.trader = trader;
			}
			getFeatureList(condition);
		}
	}

	// 时间选择
	/*@autobind
	onFormQuery(values) {
		const {
			location: { pathname, query },
			replace,
			getFeatureList,
		} = this.props;
		replace({
			pathname,
			query: {
				...query,
				begindate: values.startTime,
				enddate: values.endTime,
				currentpage: 1,
			},
		});
		getFeatureList({
			...params,
			...query,
			begindate: values.startTime,
			enddate: values.endTime,
			currentpage: 1,
		});
	}*/

	handleRowClick = (row, index, e) => {
		const { changeTrader, selectedTrader, changeClosedPositionsDetailOpen } = this.props;
		if (row !== selectedTrader) {
			changeTrader(row);
			changeClosedPositionsDetailOpen(false);
		}
		let tableRows = document.getElementsByClassName('ant-table-row')
		for(let i=0; i<tableRows.length; i++) {
			tableRows[i].style.background = '#fff';
		}
		e.currentTarget.style.background = '#ccc';
	}
	handleTabChange = (key) => {
		const { changeClosedPositionsDetailOpen } = this.props;
		if (key != 2) {
			changeClosedPositionsDetailOpen(false);
		}
	}
	render() {
		const { currentDataDate, changeTrader, isDetailOpen, changeDetailOpen,
			isClosedPositionsDetailOpen, changeClosedPositionsDetailOpen,
			featuresMapping, selectedTrader, selectedClosedPositions, location } = this.props;
		const dataDate = moment(currentDataDate).format('YYYY-MM-DD');
		const trader = selectedTrader && selectedTrader.trader;
		var traderName = trader;
		const tabBarStyleProps = {
			tabBarStyle: {
				position: 'fixed',
				top: 48,
				zIndex: '100',
				width: '68%',
				background: '#fff',
				boxShadow: '4px 10px 4px -9px rgba(0,0,0,0.07)'
			}
		};
		return (
			<div className="investmentAnalysis">
				<Tabtitle value={'交易行为分析'} />
				<div className="page-investmentAnalysis-home content-inner">

					<FeatureList
						{...this.props}
						dataDate={dataDate}
						onRowClick={this.handleRowClick}
					/>
					<Drawer open={isDetailOpen} changeOpen={changeDetailOpen} title={
						<h3 className={styles.title}>
							<span style={{fontSize: 20}}>交易员 {traderName} / {trader}</span>
							<span className={styles.subTitle}>数据日期：{dataDate}</span>
						</h3>
					} >
						<div>
							<Tabs defaultActiveKey="1" onChange={this.handleTabChange} {...tabBarStyleProps}>
								<TabPane tab="分析报告" key="1">
									{
										selectedTrader
										&& <FeaturesReport
											features={selectedTrader}
											featuresMapping={featuresMapping}
										/>
									}
									<AnalysisReport />
								</TabPane>
								<TabPane tab="复盘分析" key="2" >
									<AccountAssets />
									<ClosedPositionList />
								</TabPane>
							</Tabs>
						</div>
					</Drawer>
				</div>
			</div>
		);
	}
}

